<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		html {width:100%;height: 100%;}
		body {
			background-image: url(images/cool2.png);
		}
		*{
			padding:0;margin:0;list-style: none;	
		}
		.search {
			height:40px;margin:300px auto 0;width:540px;
		}
		select,input,button {
			height:100%;box-sizing: border-box;margin: 0;float: left;
		}
		select {outline:none;width:65px;
			text-align: center;border:0;background-color: skyblue;;
			border-radius: 6px 0 0 6px;color:white
		}
		input {width:430px;padding-left:5px;
			border: 1px solid skyblue;color:black;outline:none;
			border-radius: 0;border-left:0;border-right: 0;
		}
		button {width:45px;
			border-radius: 0 6px 6px 0;padding-left:4px;padding-right: 4px;
			border:1px solid skyblue;color: skyblue;background-color: white;
		}
		
	</style>
	<body>
		<div class="search">
				<select id="select">
					<option value ="goo" >google</option>
					<option value ="bd">baidu</option>
					
					<option value ="bi" >bilibili</option>
					<option value ="git" >github</option>
				</select>
				<input type="text" value="" id="text">
				<button id="btn">搜索</button>
		</div>
	
		<script type="text/javascript">
			let btn =document.getElementById('btn');
			let text =document.getElementById('text');
			let select =document.getElementById('select')
			btn.onclick =function() {
				if( select.value =="bd") {
					location.assign('https://www.baidu.com/s?ie=utf-8&wd=' +text.value)
					// console.log(select.value)
				} else if(select.value =="goo") {
					location.assign('https://google.com/search?q=' +text.value)
					// console.log(select.value)
				} else if(select.value =="bi") {
					location.assign('https://search.bilibili.com/all?keyword=' +text.value)
					// console.log(select.value)
				} else if(select.value =="git") {
					location.assign('https://github.com/search?q=' +text.value + '&ref=opensearch')
				}
			}
			document.addEventListener('keyup',function(e) {
				if(e.keyCode ==13) {
					btn.click();
					// console.log(e.keyCode)
				}
			})
		</script>
	</body>
</html>
